<template>
  <el-container>
    <el-header :style="{ fontsize: '12px' }">皮尔逊相关</el-header>
    <el-main>
      <el-form @submit.prevent="submitData">
        <el-form-item label="选择自变量">
          <el-select v-model="selectedColumn1" style="width: 240px" placeholder="请选择">
            <el-option v-for="column in columnOptions" :key="column" :label="column" :value="column">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择因变量">
          <el-select v-model="selectedColumn2" style="width: 240px" placeholder="请选择">
            <el-option v-for="column in columnOptions" :key="column" :label="column" :value="column">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitData">提交</el-button>
        </el-form-item>
      </el-form>
      <div v-if="statistics">
        <el-card shadow="hover">
          <el-statistic title="相关系数" :value="formatNumber(statistics.correlation, 2)"></el-statistic>
          <template #footer>
            <div>{{ getCorrelationRange(statistics.correlation) }}</div>
          </template>
        </el-card>
        <el-collapse v-model="activeNames">
          <el-collapse-item title="详细解释" name="1">
            <div>
              <p>选择的自变量是 <b>{{ selectedColumn1 }}</b>，因变量是 <b>{{ selectedColumn2 }}</b>。</p>
              <p>基于这两个变量的数据,计算得到的皮尔逊相关系数为 <b>{{ formatNumber(statistics.correlation, 2) }}</b>。</p>
              <p>皮尔逊相关系数(Pearson Correlation Coefficient)是衡量两个变量之间线性相关程度的统计量,取值范围在 -1 到 1 之间。</p>
              <p>相关系数的绝对值越接近1,表示两个变量之间的线性相关性越强。</p>
              <p>需要注意的是,皮尔逊相关系数只能反映线性相关关系,对于非线性相关关系,它可能无法有效捕捉。</p>
              <p>此外,相关性并不能直接推导出因果关系,只是提供了变量之间相关程度的参考。</p>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-main>
  </el-container>
</template>

<script setup>
import {ref, computed} from 'vue';
import {useStore} from 'vuex';
import axios from 'axios';
import {ElMessage} from 'element-plus';

const store = useStore();
const selectedColumn1 = ref(null);
const selectedColumn2 = ref(null);
const statistics = ref(null);
const data = computed(() => store.state.tableData);
const columnOptions = computed(() => {
  if (data.value.length > 0) {
    return Object.keys(data.value[0]);
  }
  return [];
});

const submitData = async () => {
  if (!selectedColumn1.value || !selectedColumn2.value) {
    ElMessage.error('请选择一个列');
    return;
  }

  try {
    const payload = {
      column1: selectedColumn1.value,
      column2: selectedColumn2.value,
      data: store.state.tableData
    };


    const response = await axios.post('http://101.43.68.110:8000/api/corr/', payload);
    statistics.value = response.data;
  } catch (error) {
    ElMessage.error('数据提交失败');
    console.error(error);
  }
};

const props = defineProps({
  statistics: {
    type: Object,
    required: true
  }
});
const formatNumber = (value, decimalPlaces) => {
  return value.toFixed(decimalPlaces);
};

const getCorrelationRange = (correlation) => {
  const absCorr = Math.abs(correlation);
  if (absCorr === 0) {
    return '没有线性相关关系';
  } else if (absCorr >= 0.8 && absCorr <= 1) {
    return '极强相关';
  } else if (absCorr >= 0.6 && absCorr < 0.8) {
    return '强相关';
  } else if (absCorr >= 0.4 && absCorr < 0.6) {
    return '中等相关';
  } else if (absCorr >= 0.2 && absCorr < 0.4) {
    return '弱相关';
  } else {
    return '极弱相关';
  }
};
</script>

<style scoped>
</style>
